<template>
  <div class="employees">
    <ShaiXuan @sss="sell" :select="select" :input="true">
      <!-- <template #slot1>
        <div class="employees-header clear">
          <div class="header-left">
            <i class="el-icon-search"></i>
            <span>筛选查询</span>
          </div>
          <div class="header-right">
            <span @click="shouqi" class="shou"
              ><i
                :class="{ 'el-icon-arrow-up': tab, 'el-icon-arrow-down': !tab }"
              ></i
              >收起筛选</span
            >
            <el-button @click="sel">查询结果</el-button>
          </div>
        </div>
      </template> -->
    </ShaiXuan>
    <!-- <div class="header">
      <div class="employees-header clear">
        <div class="header-left">
          <i class="el-icon-search"></i>
          <span>筛选查询</span>
        </div>
        <div class="header-right">
          <span @click="shouqi" class="shou"
            ><i
              :class="{ 'el-icon-arrow-up': tab, 'el-icon-arrow-down': !tab }"
            ></i
            >收起筛选</span
          >
          <el-button>查询结果</el-button>
        </div>
      </div>
      <div class="header-from" :class="{ 'header-from1': tab }">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="输入搜索">
            <el-input
              v-model="formInline.user"
              placeholder="用户名/姓名"
            ></el-input>
          </el-form-item>
          <el-form-item label="所属部门">
            <el-select v-model="formInline.region" placeholder="全部">
              <el-option label="销售部" value="xiaoshou"></el-option>
              <el-option label="市场部" value="shichnag"></el-option>
              <el-option label="总裁办" value="zongcai"></el-option>
              <el-option label="财务部" value="caiwu"></el-option>
              <el-option label="IT部" value="it"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </div> -->
    <div class="yuan-mess clear">
      <div class="yuan-left">
        <i class="el-icon-s-operation"></i>
        <span>数据列表</span>
      </div>
      <div class="yuan-right">
        <el-form>
          <el-button @click="addClick">添加</el-button>
          <el-select v-model="count" placeholder="请选择显示条数" disabled>
            <el-option value="5"></el-option>
            <el-option value="10"></el-option>
          </el-select>
          <el-select v-model="fangshi" placeholder="请选择排列方式" disabled>
            <el-option value="居中对齐"></el-option>
            <el-option value="左对齐"></el-option>
            <el-option value="右对齐"></el-option>
          </el-select>
        </el-form>
      </div>
    </div>
    <el-table :data="tableList" border style="width: 100%">
      <el-table-column prop="username" label="员工账号"> </el-table-column>
      <el-table-column prop="name" label="员工姓名"> </el-table-column>
      <el-table-column prop="phone" label="手机号"> </el-table-column>
      <el-table-column prop="department" label="所属部门"> </el-table-column>
      <el-table-column prop="position" label="职位"> </el-table-column>
      <el-table-column prop="lastLogin" label="最后登录"> </el-table-column>

      <el-table-column label="是否启用">
        <template slot-scope="scope">
          <el-switch
            @change="Switch(scope.row)"
            v-model="scope.row.isUsed"
            active-color="#13ce66"
          ></el-switch>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <a @click="rest(scope.row)">重置密码</a>
          <a @click="handleEdit(scope.row)">编辑</a>
          <a @click="handleDelete(scope.row.id)">删除</a>
        </template>
      </el-table-column>
    </el-table>

    <div class="clear Pag">
      <el-pagination
        :page-size="pageSize"
        @current-change="currentChange"
        :current-page="currentPage"
        layout="total, prev, pager, next, jumper"
        :total="currentCount"
        class="page"
      >
      </el-pagination>
    </div>
    <DiaLog
      title="重置密码"
      :input1="true"
      :input2="true"
      :dialogFormVisible.sync="dialogFormVisible"
      @save="reset"
    ></DiaLog>
    <!-- <el-dialog title="重置密码" :visible.sync="reset" class="add-dialog">
      <el-divider></el-divider>
      <el-form :model="pas" :rules="rules" class="bumen-add-from">
        <el-form-item
          label="输入新密码:"
          prop="password"
          :label-width="formLabelWidth"
        >
          <el-input
            type="password"
            v-model="pas.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="再次输入:"
          prop="resetpassword"
          :label-width="formLabelWidth"
        >
          <el-input type="password" v-model="pas.resetpassword"></el-input>
        </el-form-item>
      </el-form>
      <el-divider></el-divider>
      <div slot="footer" class="dialog-footer">
        <el-button @click="reset = false">取 消</el-button>
        <el-button type="primary" @click="reset = false">确 定</el-button>
      </div>
    </el-dialog> -->
  </div>
</template>

<script>
import ShaiXuan from "@/components/shaixuan/ShaiXuan.vue";
import DiaLog from "@/components/shaixuan/DiaLog.vue";
import {
  employeeApi,
  employeeListApi,
  employeeDelApi,
  employeeResetApi,
  employeeStateApi,
  employeeSelectApi,
} from "@/http/systemApi/employeeApi";
export default {
  name: "YuanMess",
  data() {
    // let password = (rule, value, callback) => {
    //   if (value === "") {
    //     callback(new Error("请输入密码"));
    //   } else {
    //     if (this.pas.resetpassword !== "") {
    //       this.$refs.pas.validateField("resetpassword");
    //     }
    //     callback();
    //   }
    // };
    // let resetpassword = (rule, value, callback) => {
    //   if (value === "") {
    //     callback(new Error("请再次输入密码"));
    //   } else if (value !== this.pas.password) {
    //     callback(new Error("两次输入密码不一致!"));
    //   } else {
    //     callback();
    //   }
    // };
    return {
      //   formInline: {
      //     user: "",
      //     region: "",
      //   },
      tab: true,
      // icon: true,
      // reset: false,
      formLabelWidth: "120px",
      // pas: {
      //   password: "",
      //   resetpassword: "",
      // },
      select: [
        {
          label: "所属部门",
          select: [],
        },
      ],
      currentPage: 1,
      pageSize: 10,
      count: "",
      currentCount: 0,
      fangshi: "",
      labelname: "",
      dialogFormVisible: false,
      tableList: [],
      department: [],
      resetId: "",
      // rules: {
      //   password: [{ validator: password, trigger: "blur" }],
      //   resetpassword: [{ validator: resetpassword, trigger: "blur" }],
      // },
    };
  },
  created() {
    this.getItem(this.currentPage);
  },
  activated() {
    this.getItem(this.currentPage);
  },

  methods: {
    //添加
    addClick() {
      this.$router.push("/xitong-1/addyuan");
    },
    //编辑
    handleEdit(row) {
      console.log(row);
      this.$router.push({ path: "/xitong-1/addyuan", query: { row } });
    },

    //分页
    currentChange(currentPage) {
      console.log("当前页", currentPage);
      this.currentPage = currentPage;
      this.getItem(this.currentPage);
    },

    //查询
    sell(value) {
      employeeSelectApi(value.user)
        .then((res) => {
          console.log("查询成功:", res);
          this.tableList = res.data.data;
        })
        .catch((err) => {
          console.log("c查询失败:", err);
        });
    },

    //页面
    getItem(page) {
      //获取数据
      employeeApi(page)
        .then((res) => {
          console.log("获取成功", res);
          this.tableList = res.data.data;
          //总条数
          this.currentCount = res.data.count;
        })
        .catch((err) => {
          console.log("获取失败", err);
        });


      employeeListApi()
        .then((res) => {
          console.log("全部数据",res);
          for (var i = 0; i < res.data.data.length; i++) {
            this.select[0].select.push(res.data.data[i].department);
          }
          this.select[0].select = [...new Set(this.select[0].select)].filter(
            (item) => item && item.trim()
          );
        })
        .catch((err) => {
          console.log("获取被失败", err);
        });
    },

    

    //删除
    handleDelete(id) {
      this.$confirm("你确定要永久删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(id);
          employeeDelApi(id).then((res) => {
            console.log(res);
            this.getItem(this.currentPage);
          });
          this.$message({
            type: "success",
            message: "删除成功",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //状态改变
    Switch(row) {
      console.log("改变的id:", row.id, row.isUsed);
      employeeStateApi(row.id, row.isUsed)
        .then((res) => {
          console.log("改变成功:", res);
        })
        .catch((err) => {
          console.log("改变失败:", err);
        });
    },

    //重置密码
    rest(row) {
      this.dialogFormVisible = true;
      this.resetId = row.id;
    },
    reset(form, callback) {
      this.dialogFormVisible = false;
      employeeResetApi(this.resetId, form.resetpassword)
        .then((res) => {
          console.log(this.resetId);
          console.log("重置成功:", res);
          callback();
        })
        .catch((err) => {
          console.log("重置失败:", err);
        });
    },
  },
  computed: {},
  components: {
    ShaiXuan,
    DiaLog,
  },
};
</script>

<style lang="scss" scoped>
.employees {
  & .header {
    border: 1px solid rgb(217, 217, 217);
  }
  & .employees-header {
    height: 60px;
    line-height: 60px;
    padding: 0 20px;
    border: 1px solid rgb(217, 217, 217);
    background-color: rgb(232, 232, 232);
    border-bottom: none;
  }
  & .header-left {
    float: left;
  }
  & .header-right {
    float: right;
  }
  & .header-from {
    padding: 0 50px;
    height: 0px;
    overflow: hidden;
    transition: all 0.5s;
  }
  & .header-from1 {
    height: 60px;
  }
  & .demo-form-inline {
    margin-top: 10px;
  }
  & .shou {
    cursor: pointer;
    margin-right: 20px;
  }

  & .yuan-mess {
    width: 100%;
    height: 60px;
    line-height: 60px;
    padding: 0 15px;
    margin-top: 50px;
    background-color: rgb(232, 232, 232);
    box-sizing: border-box;
  }

  & .yuan-left {
    float: left;
  }
  & .yuan-right {
    float: right;
  }
  & a {
    margin-right: 15px;
    color: rgb(61, 222, 120);
    cursor: pointer;
  }

  & .Pag {
    height: 50px;
    padding-top: 20px;
    border: 1px solid rgb(224, 224, 224);
  }
  & .page {
    float: right;
  }
  & .add-dialog {
    width: 1000px;
    position: absolute;
    left: 20%;
    top: 10%;
  }
  & .bumen-add-from {
    width: 400px;
  }
}
</style>